<!DOCTYPE html>

<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<!-- 标题 -->
		<title>数据中心监控大屏-test</title>
		<!-- jquary 和 echarts 插件资源文件 -->
		<script src="lib\jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib\echarts.min.js"></script>
		<!-- app.css 页面主样式文件 -->
		<link rel="stylesheet" href="css/app.css" />
		<!-- 钟表样式css文件 -->
		<link rel="stylesheet" href="css/clock.css" />
		<!-- 获取zabbixAPI的token  -->
		<script src="js\authGetAll.js"></script>
		<!-- 获取历史报警的js文件 -->
		<script src="js\alertGet.js"></script>
		<!-- 获取主机信息的js文件 -->
		<script src="js\hostGet.js"></script>
		<!-- 获取监控项的js文件 -->
		<script src="js/itemGet.js" type="text/javascript" charset="utf-8"></script>
		<!-- 折线图、饼图、条形图的配置js文件 -->
		<script src="js\main.js"></script>
		<!-- 控制js调用时间节点的js文件 -->
		<script src="js\ctrl.js"></script>
		<!-- 设置出现报警时的主页颜色改变及报警等级 -->
		<script src="js/warn.js"></script>
		<!-- 折线图的横坐标日期获取 -->
		<script src="js/date.js" type="text/javascript" charset="utf-8"></script>
		<!-- 获取各个专线的流量数据 -->
		<script src="js/liuliang.js" type="text/javascript" charset="utf-8"></script>
		<!-- 主页小图标资源文件 -->
		<link rel="stylesheet" href="Font-Awesome-master/css/all.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/brands.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/fontawesome.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/regular.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/soild.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/svg-with-js.css" />
		<link rel="stylesheet" href="Font-Awesome-master/css/v4-shims.css" />

	</head>

	<body>
		<div class="header">
			<h1 class="header-title">数据中心监控大屏</h1>
		</div>
		<div class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-40">
						<div class="xpanel xpanel-l-t">
							<div class="title">报警趋势</div>
							<div class="mid-tu">
								<div id="main" class="main"></div>
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-60">
						<div class="xpanel xpanel-l-b">
							<div class="title">专线监控仪表</div>
							<div class="yibiaopan">
								<div id="yibiaopan_1" class="yibiaopan_1"></div>
								<div id="yibiaopan_2" class="yibiaopan_2"></div>
								<div id="yibiaopan_3" class="yibiaopan_3"></div>
								<div id="yibiaopan_4" class="yibiaopan_4"></div>
							</div>

						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-75">
						<div class="xpanel no-bg">
							<!-- 基础信息 -->
							<div class="div_info">
								<div class="qd_info" id="qd_info">
									<span class="span" style="text-align: center;display:block;">青岛工厂</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="qd_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="qd_items" align="center" style="font-size: 3vh;">33</td>
											<td id="qd_alerts" align="center" style="font-size: 3vh;">0</td>
										</tr>
									</table>
								</div>
								<div class="yf_info" id="yf_info">
									<span class="span" style="text-align: center;display:block;">研发中心</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="yf_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="yf_items" align="center" style="font-size: 3vh;">33</td>
											<td id="yf_alerts" align="center" style="font-size: 3vh;">3434</td>
										</tr>
									</table>
								</div>
								<div class="yn_info" id="yn_info">
									<span class="span" style="text-align: center;display:block;">越南工厂:</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="yn_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="yn_items" align="center" style="font-size: 3vh;">33</td>
											<td id="yn_alerts" align="center" style="font-size: 3vh;">0</td>
										</tr>
									</table>
								</div>
								<div class="sy_info" id="sy_info">
									<span class="span" style="text-align: center;display:block;">沈阳工厂:</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="sy_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="sy_items" align="center" style="font-size: 3vh;">33</td>
											<td id="sy_alerts" align="center" style="font-size: 3vh;">0</td>
										</tr>
									</table>
								</div>
								<div class="dy_info" id="dy_info">
									<span class="span" style="text-align: center;display:block;">东营工厂:</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="dy_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="dy_items" align="center" style="font-size: 3vh;">33</td>
											<td id="dy_alerts" align="center" style="font-size: 3vh;">0</td>
										</tr>
									</table>
								</div>
								<div class="ac_info" id="ac_info">
									<span class="span" style="text-align: center;display:block;">ACTR:</span>
									<table border="0" cellspacing="" cellpadding="" class="table_info" width="100%"
										height="79%">
										<tr>
											<th style="font-size: 2.2vh;">主机数&nbsp;<div class="fa fa-server"></div>
											</th>
											<th style="font-size: 2.2vh;">监控项&nbsp;<div class="fa fa-eye"></div>
											</th>
											<th style="font-size: 2.2vh;">报警数&nbsp;<div
													class="fas fa-exclamation-triangle"></div>
											</th>
										</tr>
										<tr>
											<td id="ac_hosts" align="center" style="font-size: 3vh;">12</td>
											<td id="ac_items" align="center" style="font-size: 3vh;">33</td>
											<td id="ac_alerts" align="center" style="font-size: 3vh;">3434</td>
										</tr>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-c-b">
							<!-- 当前报警信息 -->
							<div class="title title-long">当前报警</div>
							<table width="88%" style="font-size: 2vh; color: #03E9F4;" cellpadding="0" cellspacing="0"
								border="0" align="left">
								<tr>
									<th>时间</th>
									<th>主机</th>
									<th>问题</th>
								</tr>
							</table>
							<div class="scroll-box">
								<table class="roll" cellpadding="0" cellspacing="0" border="0">
									<tr class="rol">
										<td>12021-04-04 17:25:15</td>
										<td>navision(172.16.101.210)</td>
										<td>Free disk space is less than 20% on volume F:</td>
									</tr>
									<tr class="rol">
										<td>22021-04-04 17:25:15</td>
										<td>navision(172.16.101.210)</td>
										<td>Free disk space is less than 20% on volume F:</td>
									</tr>
									<tr class="rol">
										<td>32021-04-04 17:25:15</td>
										<td>navision(172.16.101.210)</td>
										<td>Free disk space is less than 20% on volume F:</td>
									</tr>
									<!-- <tr class="rol"><td>42021-04-04 17:25:15</td><td>navision(172.16.101.210)</td> <td>Free disk space is less than 20% on volume F:</td></tr> -->
									<!-- <tr class="rol"><td>52021-04-04 17:25:15</td><td>navision(172.16.101.210)</td> <td>Free disk space is less than 20% on volume F:</td></tr> -->
									<!-- <tr class="rol"><td>62021-04-04 17:25:15</td><td>navision(172.16.101.210)</td> <td>Free disk space is less than 20% on volume F:</td></tr> -->
									<!-- <tr class="rol"><td>72021-04-04 17:25:15</td><td>navision(172.16.101.210)</td> <td>Free disk space is less than 20% on volume F:</td></tr> -->
									<!-- <tr class="rol"><td>82021-04-04 17:25:15</td><td>navision(172.16.101.210)</td> <td>Free disk space is less than 20% on volume F:</td></tr> -->
								</table>
							</div>
							<!-- 						<table border="0" class="table_baojing" align="center">
								<tr align="center">
									<th>时间</th>
									<th>主机</th>
									<th>问题</th>
								</tr>
								<tr align="center">
									<td>2021-04-04 17:25:15 </td>
									<td>navision(172.16.101.210)</td>
									<td>Free disk space is less than 20% on volume F:</td>
								</tr>
								<tr align="center">
									<td>2021-04-05 44:25:15 </td>
									<td>navision(172.16.101.210)</td>
									<td>fasfafasfafa</td>
								</tr>
								<tr align="center">
									<td>2021-04-04 17:25:15 </td>
									<td>navision(172.16.101.210)</td>
									<td>mkjhkj</td>
								</tr>
							</table> -->
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-25">
						<div class="xpanel xpanel-r-t">
							<div class="time_set">
								<!-- 		<div class="light">
									<div class="digits"></div>
								</div> -->
								<!-- 北京 -->
								<div class="time_beijing">
									<div class="clock" id="clock">
										<!-- 原点 -->
										<!-- <div class="origin"></div> -->

										<!-- 时分秒针 -->
										<!-- <div class="clock-line hour-line" id="hour-line"></div>
											<div class="clock-line minute-line" id="minute-line"></div>
											<div class="clock-line second-line" id="second-line"></div> -->

										<!-- 日期 -->
										<div class="date-info" id="date-info"></div>
										<div class="week-info" id="week-info"></div>
										<!-- 时间 -->
										<div class="time-info">
											<div class="time" id="hour-time"></div>
											<div class="colon">:</div>
											<div class="time" id="minute-time"></div>
											<div class="colon">:</div>
											<div class="time" id="second-time"></div>
										</div>

									</div>
								</div>
								<!-- 胡志明 -->
								<div class="time_yuenan">
									<div class="clock2" id="clock2">
										<!-- 原点 -->


										<!-- 时分秒针 -->
										<!-- <div class="clock-line2 hour-line2" id="hour-line2"></div>
											<div class="clock-line2 minute-line2" id="minute-line2"></div>
											<div class="clock-line2 second-line2" id="second-line2"></div> -->

										<!-- 日期 -->
										<div class="date-info2" id="date-info2"></div>
										<div class="week-info2" id="week-info2"></div>
										<!-- 时间 -->
										<div class="time-info2">
											<div class="time2" id="hour-time2"></div>
											<div class="colon2">:</div>
											<div class="time2" id="minute-time2"></div>
											<div class="colon2">:</div>
											<div class="time2" id="second-time2"></div>
										</div>
									</div>
								</div>
								<!-- 胡志明时间 -->
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-r-m">
							<div class="title">报警类型排名</div>
							<!-- 报警数量统计饼图 -->
							<div class="baojing_bingtu">
								<div id="main2" class="main2"></div>
							</div>

						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30">
						<div class="xpanel xpanel-r-b">
							<div class="title">主机报警排名</div>
							<div class="zhuzhuangtu">
								<div id="main3" class="main3"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 当前报警滚动 -->
		<script type="text/javascript" src="js/roll.js"></script>
		<!-- 设置时间，北京时间和胡志明时间 -->
		<script type="text/javascript" src="js/clock.js"></script>
		<script type="text/javascript" src="js/clock2.js"></script>
		<!-- 获取到主机数监控项和报警数之后，显示在中间六个方块的相应位置 -->
		<script src="js\css.js"></script>
		<!-- 流量监控仪表盘 -->
		<script src="js/yibiaopan.js" type="text/javascript" charset="utf-8"></script>
		<!-- 设置时间 -->
	</body>
</html>
